<!-- 悬浮按钮滚动到顶部 -->
<template>
	<view v-if="scrollTop > 100" :animation="animationData" class="btn-plusempty" hover-class="bottom-btn-hover" @tap="tapTop()">
		<img style="width:50px;height:50px" src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/goTop.png" alt="">
	</view>
</template>

<script>
	let animation = uni.createAnimation({ 
		timingFunction: 'ease',
	})
	export default {
		props: {
			// 页面滚动距离
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				imgurl:'//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/goTop.png',
				animationData: {}
			}
		},

		onLoad() {

		},
		created() {
			//默认不显示
			animation.opacity(0).step({duration:0});
			this.animationData = animation.export()
		},
		watch: {
			scrollTop(newVal, oldVal) {
				if (newVal < 100) {
					//淡出
					animation.opacity(0).step({duration:500})
					this.animationData = animation.export()
				} else {
					//淡入
					animation.opacity(1).step({duration:500}) //描述动画
					this.animationData = animation.export()
				}
			}
		},
		methods: {
			//滚动到顶部
			tapTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			}

		}
	}
</script>

<style scoped>
	.btn-plusempty {
		width: 50px;
		height: 50px;
		position: fixed;
		bottom: 12rpx;
		right: 14px;
		border-radius: 100%;
		overflow: hidden;
		text-align: center;
		z-index: 10;
	}

	.plusempty-icon {
		color: #8A8C8D;
		font-size: 36rpx;
		font-weight: bold;
	}
</style>
